<template>
  <div class="single-curve">
    <el-form ref="ruleFormRef" :model="ruleForm" label-width="right" class="conditions-form">
      <el-form-item label="电站" prop="stationId">
        <el-select v-model="ruleForm.stationId" placeholder="请选择电站" clearable>
          <el-option v-for="station in stationOptions" :key="station.value" :label="station.label"
            :value="station.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="电池堆" prop="batteryPileId">
        <el-select v-model="ruleForm.batteryPileId" placeholder="请选择电池堆" clearable>
          <el-option v-for="pile in batteryPileOptions" :key="pile.value" :label="pile.label"
            :value="pile.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="单体" prop="cellId">
        <el-input v-model="ruleForm.cellId" placeholder="请输入单体编号"></el-input>
      </el-form-item>
      <el-form-item label="单体" prop="month">
        <el-date-picker v-model="ruleForm.timeRange" type="datetimerange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
      </el-form-item>
      <el-form-item>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        <el-button @click="submitForm(ruleFormRef)">
          查询
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="exportReport">
          导出
        </el-button>
      </el-form-item>
    </el-form>
    <div class="cont">
      <div v-for="(item, index) in singleData" :key="index" class="chartsItem">
        <ECharts :option="getChartOptions(item)" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import ECharts from '@/components/ECharts.vue';
const singleData = ref([
  {
    name: '电压/V',
    chartData: [
      {
        data: '2024-09-29 14:57:19',
        value: 3.2
      },
      {
        data: '2024-09-29 14:57:20',
        value: 3.3
      },
      {
        data: '2024-09-29 14:57:21',
        value: 3.4
      },
      {
        data: '2024-09-29 14:57:22',
        value: 3.5
      },
      {
        data: '2024-09-29 14:57:23',
        value: 3.6
      }
    ],
    color: '#046AF9'
  },
  {
    name: '电流/A',
    chartData: [
      {
        data: '2024-09-29 14:57:19',
        value: 1.5
      },
      {
        data: '2024-09-29 14:57:20',
        value: 1.6
      },
      {
        data: '2024-09-29 14:57:21',
        value: 1.7
      },
      {
        data: '2024-09-29 14:57:22',
        value: 1.8
      },
      {
        data: '2024-09-29 14:57:23',
        value: 1.9
      }
    ],
    color: '#FF8C00'
  },
  {
    name: '温度/℃',
    chartData: [
      {
        data: '2024-09-29 14:57:19',
        value: 25
      },
      {
        data: '2024-09-29 14:57:20',
        value: 26
      },
      {
        data: '2024-09-29 14:57:21',
        value: 27
      },
      {
        data: '2024-09-29 14:57:22',
        value: 28
      },
      {
        data: '2024-09-29 14:57:23',
        value: 29
      }
    ],
    color: '#64C22B'
  }
])

// 根据数据项生成图表选项
const getChartOptions = (item) => {
  const xAxisData = item.chartData.map(point => point.data);
  const seriesData = item.chartData.map(point => point.value);
  
  return {
    grid: {
      left: '2%',
      right: '2%',
      top: '10%',
      bottom: '15%'
    },
    legend: {
      data: [item.name],
      top: 0
    },
    xAxis: {
      data: xAxisData,
    },
    series: [
      {
        name: item.name,
        type: 'line',
        data: seriesData,
        itemStyle: {
          color: item.color
        },
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
          width: 2
        }
      }
    ]
  };
};

// 定义表单数据
const ruleFormRef = ref();
const ruleForm = ref({
  stationId: '',
  batteryPileId: '',
  cellId: '',
  timeRange: ''
});
// 模拟下拉选项数据
const stationOptions = ref([
  { value: 'station1', label: '电站一' },
  { value: 'station2', label: '电站二' },
  { value: 'station3', label: '电站三' }
]);

const batteryPileOptions = ref([
  { value: 'pile1', label: '电池堆一' },
  { value: 'pile2', label: '电池堆二' },
  { value: 'pile3', label: '电池堆三' }
]);

// 表单提交和重置函数
const submitForm = (formEl: any) => {
  if (!formEl) return;
  formEl.validate((valid: boolean) => {
    if (valid) {
      console.log('查询条件', ruleForm.value);
      // 这里添加查询逻辑
    }
  });
};

const resetForm = (formEl: any) => {
  if (!formEl) return;
  formEl.resetFields();
};

// 导出报告
const exportReport = () => {
  console.log('导出报告', ruleForm.value);
  // 这里添加导出逻辑
};
</script>

<style lang="scss" scoped>
.single-curve {
  :deep(.conditions-form) {
    .el-form-item {
      margin-right: 0.2rem;
    }

    .el-form-item .el-form-item__content .el-select__wrapper {
      width: 1.6rem;
    }
  }

  .cont {
    padding: 0.12rem 0.16rem;
    background: #fff;
    margin-top: 0.12rem;
    .chartsItem{
      height: 3rem;
      margin-bottom: 0.2rem;
    }
  }
}
</style>
